<!-- NavBar.vue -->
<script setup>
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

console.log(userStore)

const logout = () => {
  userStore.logout()
  router.push('/login')
}

const user = {
  name: userStore.name,
  avatar: userStore.avatar
}
</script>


<template>
  <el-header class="nav-bar">
    <div class="logo">🌋 Volcanic Coffee</div>
    <el-menu mode="horizontal" router :default-active="$route.path">
  <el-menu-item index="/">首页</el-menu-item>
  <el-menu-item index="/brand">我们的品牌</el-menu-item>
  <el-menu-item index="/products">我们的产品</el-menu-item>
  <el-menu-item index="/stores">我们的门店</el-menu-item>
  <el-menu-item index="/news">新闻动态</el-menu-item>
  <el-menu-item index="/contact">联系我们</el-menu-item>
  <el-menu-item
    v-if="userStore.isStaff"
    index="/staff-chat"
  >员工交流</el-menu-item>
  <el-menu-item
    v-if="userStore.isAdmin"
    index="/admin"
  >后台管理</el-menu-item>
</el-menu>

    <div class="user-section">
      <template v-if="userStore.isLoggedIn">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar src="/mock-bg.jpg" size="small" />
            <span class="user-nickname">{{ userStore.name }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$router.push('/profile')">个人中心</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <el-button link @click="$router.push('/login')">登录</el-button>
        <el-button type="primary" @click="$router.push('/register')">注册</el-button>
      </template>
    </div>
  </el-header>
</template>

<style scoped>
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  background: linear-gradient(to right, #4a2e18, #7b4f2c);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.logo {
  font-weight: 700;
  font-size: 24px;
  color: #ffe8c2;
  letter-spacing: 1px;
}

.el-menu {
  background-color: transparent;
  border-bottom: none;
  flex: 1;
  justify-content: center;
}

.el-menu-item {
  font-size: 16px;
  color: #ffe8c2 !important;
  padding: 0 18px;
  transition: all 0.3s ease;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.el-menu-item.is-active {
  border-bottom: 2px solid #ffe082;
  color: #fff !important;
  background-color: transparent !important; /* 去掉浅蓝背景 */

}

.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.el-button {
  font-size: 15px;
  font-weight: 500;
}

.el-button--text {
  color: #ffe8c2;
}

.el-button--primary {
  background-color: #ffe082;
  border-color: #ffe082;
  color: #4a2e18;
}

.el-button--primary:hover {
  background-color: #ffd54f;
  border-color: #ffd54f;
}

.user-nickname {
  margin-left: 8px;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
}

</style>
